<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .isactive {
        background-color: #f66;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <template id="content">
      <!-- v-bind -->
      <!--绑定一个对象,将一个对象的所有的属性都绑定到这个元素上,直接使用v-bind绑定一个对象  -->
      <div v-bind="info">{{message}}</div>
      <!-- v-on -->
      <!-- 一个元素绑定多个事件 -->
      <button v-on="{click: btnClick, mousemove:btnMove}">按钮</button>
      <!-- 事件传参 -->
      <button @click="btn2Click($event,'lion')">按钮2</button>
    </template>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script type="text/javascript">
    const app = Vue.createApp({
      template: "#content",
      data() {
        return {
          isActive: true,
          message: "你好vue3",
          info: {
            style: { color: "#fff" },
            class: { isactive: false },
          },
        };
      },
      mounted() {
        this.info.class.isactive = this.isActive; //不能直接在data中取值,不然是undefined
      },
      methods: {
        btnClick(event) {
          console.log("---", event);
        },
        btnMove(event) {
          console.log("+++", event);
        },
        btn2Click(event,msg){
            console.log(event);
            console.log("msg is ",msg);
        }
      },
    });
    app.mount("#app");
  </script>
</html>
